<template>
  <div id="circlePreserveList">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>

    <div class="table-conBtn">
      <el-button v-permission="'wh:system:circle:deleteAll'" :disabled="searchDelStatus === 'Y'" type="warning" @click="delAll()">批量删除</el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>

    <!--全选-->
    <el-checkbox v-model="checkAll" class="topCheck" :indeterminate="isIndeterminate" :disabled="searchDelStatus === 'Y'" @change="handleCheckAllChange"></el-checkbox>

    <!--下部table-->
    <div v-if="loading" v-loading="loading"></div>
    <p v-if="tableData.length === 0 && !loading" class="no-data">
      暂无数据！
    </p>

    <div class="container" ref="container">
      <el-checkbox-group v-if="tableData.length > 0 && !loading" v-model="multipleSelection" v-loading="loading" @change="checkChange">
        <div v-for="(item, index) in tableData" :key="item.id" class="line">
          <div class="line-left">
            <el-checkbox :label="item.id" :disabled="item.deleted"> {{ stance }} </el-checkbox>
          </div>

          <div class="line-right">
            <!--用户主要信息-->
            <userInfo ref="uInfo" :item="item" :index="index" from="circle" :labelList="labelList" :labelListTotal="labelListTotal" @refresh="refresh"></userInfo>

            <!--点赞、删除...按钮-->
            <userBtn v-if="showComment(item)" :item="item" :btn-num="btnNum" title="圈子维护" :index="index" from="circle" @refresh="refresh"></userBtn>

            <!--说点什么-->
            <template v-permission="'wh:system:circle:addComment'">
              <userTalk v-if="showComment(item)" ref="userTalk" :item="item" title="圈子维护" @refresh="refresh"></userTalk>
            </template>
          </div>
        </div>
      </el-checkbox-group>
    </div>

    <!-- 删除弹窗 -->
    <delDialog v-if="delDialogData.isShow" :del-dialog-data="delDialogData" @reasonDel="reasonDel"></delDialog>

    <!--分页-全局组件-->
    <pageCom :searchParams="searchParams" :total="total" @searchList="changePage"></pageCom>
  </div>
</template>

<script>
import { getCirclePostList, delSingle } from '@/api/circlesManagement' // 接口
import topSearch from '@component/circlesManagement/circlePreserve/topSearch' // 上部搜索条件
import userInfo from '@component/circlesManagement/common/userInfo' // 用户主要信息
import userBtn from '@component/circlesManagement/common/userBtn' // 点赞、删除...按钮
import userTalk from '@component/circlesManagement/common/userTalk' // 说点什么
import delDialog from '@component/common/delDialog' // 删除弹窗
import { sysNormalDisable, getPraiseBtn } from '@utils/dictionariesFunc'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { jobWorkMixins } from '@/mixins/jobWork'

export default {
  name: 'activeManage',
  msg: '圈子管理-圈子维护-列表页',
  mixins: [saveScrollMixins, jobWorkMixins],

  components: {
    userInfo,
    userBtn,
    userTalk,
    topSearch,
    delDialog
  },

  data() {
    return {
      total: 0,
      searchDelStatus: 'N',
      formInline: {
        contentType: '', // 帖子类型
        direction: '', // 排序规则
        manualAuditingState: '', // 人审状态
        whetherDelete: '', // 删除状态
        userType: '', // 用户属性
        linkCircleIds: '', // 所属圈子
        circleIsTop: '', // 是否置顶
        content: '', // 内容查询
        dpAccount: '', // 用户搜索
        createdDateStart: '', // 开始时间
        createdDateEnd: '', // 结束时间
        createTime: []
      },
      stance: '',
      powerStr: 'system:circle:list' // 是否查询的标识
    }
  },

  activated() {
    // 跳到滚动距离
    this.$nextTick(() => {
      this.toContainerScrollHeight()
    })
  },
  mounted() {
    this.getBtnList()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      // 监听滚动事件
      window.addEventListener('scroll', this.setContainerScrollHeight, true)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        sessionStorage.setItem(`powerAry_${id}`, res)
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
        this.getBtnList()
      })
    },

    /* 获取小手点赞数值 */
    async getBtnList() {
      if (!this.canGetList) return
      let str = await getPraiseBtn()
      this.btnNum = str.split(',')
    },

    /* 获取评论按钮列表 */
    async getTalkBtnList() {
      let data = await sysNormalDisable('sys_grade')
      for (let i = 0; i < this.tableData.length; i++) {
        this.$refs['userTalk'][i].getBtnList(data)
      }
    },

    /*是否显示评论点赞区域*/
    showComment(item) {
      let isHide = item.whetherDelete || (item.verifyRecord.machineAuditing.auditingState === 'UNPASS' && item.verifyRecord.manualAuditing.auditingState === 'UNCHECKED') || item.video.auditingState === 'UNPASS'
      return !isHide
    },

    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      this.tableData = []
      this.total = 0
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getCirclePostList(obj, (response) => {
        this.loading = false
        this.tableData = response.rows
        this.total = response.total
        // 获取列表数据之后，遍历当前列表，获取全部id
        this.checkTableId()
        if (this.formInline.whetherDelete === 'false' || !this.formInline.whetherDelete) {
          //未删除状态获取小手点赞
          this.getTalkBtnList()
          this.searchDelStatus = 'N'
        } else {
          this.searchDelStatus = 'Y'
        }
      }, (response) => {
        this.loading = false
        this.$message.warning(response.message)
      })
    },

    /* 遍历获取当前页面table的id */
    checkTableId() {
      this.tableIds = []
      let _this = this
      this.tableData.forEach((item) => {
        if (item.id) {
          _this.tableIds.push(item.id)
        }
      })
    },

    // 删除请求
    reasonDel(res) {
      let type = this.delDialogData.type
      this.$confirm(`${type}理由：${res} 确认${type}该条信息？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = this.multipleSelection.map(item => { return item }).join()
        let obj = { postId: ids, remark: res, auditingState: 'UNPASS' }
        delSingle(obj, (response) => {
          this.searchList()
          this.multipleSelection = []
          this.isIndeterminate = false
        },(response) => {
          this.$message.warning('删除失败，' + response.message)
        })
        this.delDialogData.isShow = false
      })
    }
  }
}
</script>

<style lang="less">
#circlePreserveList {
  .topCheck {
    margin-left: 30px;
  }

  .line {
    display: flex;
    justify-content: left;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 25px 0 30px;

    .line-left {
      padding: 0 30px;
    }

    .line-right {
      flex: auto;
    }
  }
  p.no-data {
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #666;
  }
  .container {
    max-height: 490px;
    overflow-y: auto;
  }
}
</style>
